<template>
  <div>
    <div class="section-lazyonload">
      <div class="text-scroll" :style="{ height: tabHeight }">
        <div class="text-section">
          <div class="text-section__top">
            <div class="text-default large" @click="Add(40)">
              <span>点击添加标题文字</span>
            </div>
            <div class="text-default middle" @click="Add(30)">
              <span>点击添加副标题文字</span>
            </div>
            <div class="text-default small" @click="Add(24)">
              <span>点击添加正文文字</span>
            </div>
          </div>
          <hr class="leftPanel__hr" />
          <ul class="text-list-ul">
            <li
              class="text-item"
              v-for="(item, index) in wordList"
              :key="index"
            >
              <div
                class="leftPanel-common-results-item font"
                @click="addImage(item.imgUrl)"
              >
                <div class="container-noStyle isLimited">
                  <img
                    :src="item.imgUrl + imgBottom"
                    class="font"
                    style="height: auto; width: 100%;"
                  />
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import wordBoxList from "@/api/allData/wordData/AllWord";

export default {
  name: "words",
  props: ["tabHeight"],
  data() {
    return {
      imgBottom: "?x-oss-process=image/resize,w_544/format,webp",

      wordList: wordBoxList
    };
  },
  computed: {
    ...mapGetters(["canvas", "selectedObj"])
  },
  created() {},
  mounted() {},
  methods: {
    ...mapActions(["addWord", "addImage"]),
    JianBian() {
      this.selectedObj.set(
        "fill",
        new fabric.Gradient({
          //线性
          type: "linear",
          coords: {
            x1: "0",
            y1: "0",

            x2: "0",
            y2: this.selectedObj.height
          },
          colorStops: [
            { color: "red", offset: 0 },
            { color: "yellow", offset: 1 }
          ]
        })
      );
      this.canvas.renderAll();
    },
    Add(px) {
      //增加文字，到屏幕中间
      this.addWord(px);
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../styles/leftPanel/index.less";
@import "../../styles/leftPanel/words.less";
</style>
